<template>
  <div class="dog">
    <img src="https://scpic.chinaz.net/files/pic/pic9/202003/zzpic23514.jpg" alt="dog">
    <p @click="chColor" :style="{color, background}">这是一条孤独可怜的狗</p>
  </div>
</template>

<script>
export default {
  name: 'DogCom',
  data () {
    return {
      color: '#000',
      background: '#fff'
    }
  },
  methods: {
    chColor () {
      this.color = 'rgb(' + parseInt(Math.random() * 256) + ', ' + parseInt(Math.random() * 256) + ', ' + parseInt(Math.random() * 256) + ')'
      this.background = 'rgb(' + parseInt(Math.random() * 256) + ', ' + parseInt(Math.random() * 256) + ', ' + parseInt(Math.random() * 256) + ')'
    }
  }
}
</script>

<style lang="less" scoped>
  .dog {
    display: inline-block;
    width: 300px;
    border: 1px solid #ccc;
    img {
      width: 100%;
      vertical-align: middle;
    }
    p {
      text-align: center;
    }
  }
</style>
